.k-switch {
   width: 48px;
   height: 24px;
   line-height: 22px;
   border-radius: 24px;
   vertical-align: middle;
   border: 1px solid #ccc;
   background-color: #ccc;
   position: relative;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   transition: all .2s ease-in-out;
   display: inline-block;
   box-sizing: border-box;
   overflow: hidden;
   .k-switch-button {
      width: 20px;
      height: 20px;
      border-radius: 20px;
      background-color: #fff;
      position: absolute;
      left: 1px;
      top: 1px;
      cursor: pointer;
      transition: left .2s ease-in-out, width .2s ease-in-out;
   }
   &:active {
      .k-switch-button {
         width: 25px;
      }
   }
   .k-switch-inner{
      color: #fff;
      margin-left: 25px;
   }
}

.k-switch-checked {
   background: @main;
   border-color: @main;
   .k-switch-button {
      left: 25px;
   }
   &:active {
      .k-switch-button {
         left: 20px;
      }
   }
   .k-switch-inner{
      margin-left: 8px;
   }
   &.k-switch-success {
      background: #19be6b;
      border-color: #19be6b;
   }
   &.k-switch-primary {
      background: #3a95ff;
      border-color: #3a95ff;
   }
   &.k-switch-danger {
      background: #ed3f14;
      border-color: #ed3f14;
   }
   &.k-switch-warning {
      background: #ffac13;
      border-color: #ffac13;
   }
    
}
.k-switch-disabled{
   opacity: .5;
   cursor: not-allowed;
}
